<template>
  <div class="showImgBox">
    <!-- 房产证 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="28%" >
     <span v-if="type==1"><img :src="propertyOwnershipImg" alt=""></span>  <!-- 房产证 -->
     <div v-if="type==2"> <!--身份证-->
        <span><img :src="frontOfIdCardUrl" alt=""></span>
        <span><img :src="reverseOfIdCardUrl" alt=""></span>
        <!-- <span><img src="../assets/images/loginbg.png" alt=""></span> 
        <span><img src="../assets/images/loginbg.png" alt=""></span>  -->
     </div>
     <span v-if="type==3"><img :src="photoFile" alt=""></span>  <!-- 房产证 -->          
    </el-dialog>    
  </div>
</template>
<script>
export default {
  name: 'showImg',
  data () {
    return {
      dialogVisible: false,   
      title:null,
      propertyOwnershipImg:null,   //房产证
      reverseOfIdCardUrl:null, //身份证反面
      frontOfIdCardUrl:null,   //身份证  正面 
      type:null,
      photoFile:null        
    }
  },
  methods: { 
    loadDialogData(row,title,type){
       this.dialogVisible=true;
        setTimeout(() => {
          this.type=type;
          this.title=title;
          if(type==1){                                            
            this.propertyOwnershipImg=row.propertyOwnershipCertificateUrl;                                
          }else if(type==2){                                   
            this.frontOfIdCardUrl=row.frontOfIdCardUrl;
            this.reverseOfIdCardUrl=row.reverseOfIdCardUrl;            
          }else if(type==3){    
            this.photoFile= row.photoFile;                   
          }else{
            
          }
       }, 10);  
  
    }
  },
  mounted(){         
        
  }
}
</script>

<style scoped>
img{
  /* width: 100%; */
}

.showImgBox img{
  max-height:400px;
  max-width: 100%;
}
</style>
<style>
.showImgBox .el-dialog__header{
  text-align: left;
}
.showImgBox .el-dialog__body{
    min-height: 400px;
    max-height: 800px;
    overflow-y: auto;
}

</style>
